<template>
	<u-popup :show="value" round="10" mode="center" :closeOnClickOverlay="false" :safeAreaInsetBottom="false">
		<view class="u-popup">
			<view class="title-link">人员基础信息</view>
			<u--form labelPosition="left" error-type="['toast']" :model="formData" :rules="rules" ref="uForm" labelWidth="200rpx" :labelStyle="labelStyle">
				<view class="check-list">
					<u-form-item required label="房屋分类:" prop="houseStatus" @click="openPicker('house_status')">
						<view slot="right" class="item-text">{{ getValue(formData.houseStatus, dictList.house_status) }}</view>
					</u-form-item>
				</view>
				<view class="check-list">
					<u-form-item required label="房屋用途:" prop="housePurpose" @click="openPicker('house_use')">
						<view class="item-text">{{ getValue(formData.housePurpose, dictList.house_use) }}</view>
					</u-form-item>
				</view>
				<view class="check-list">
					<u-form-item label="承租人姓名:">
						<view class="item-text">{{ formData.name || '' }}</view>
					</u-form-item>
				</view>
				<view class="check-list">
					<u-form-item label="证件号码:">
						<view class="item-text">{{ formData.cardNum || '' }}</view>
					</u-form-item>
				</view>
				<view class="check-list">
					<u-form-item label="民族:">
						<view class="item-text">{{ formData.nation || '' }}</view>
					</u-form-item>
				</view>
				<view class="check-list">
					<u-form-item label="承租人联系电话:" label-width="240rpx">
						<view class="item-text">{{ formData.mobile || '' }}</view>
					</u-form-item>
				</view>
				<view class="check-list">
					<u-form-item required label="与家庭主关系:" prop="homeOwnerRelation">
						<u--input v-model="formData.homeOwnerRelation" border="none" inputAlign="right" maxlength="10"></u--input>
					</u-form-item>
				</view>
				<view class="check-list">
					<u-form-item required label="与房主关系:" prop="houseOwnerRelation">
						<u--input v-model="formData.houseOwnerRelation" border="none" inputAlign="right" maxlength="10"></u--input>
					</u-form-item>
				</view>
				<view class="check-list">
					<u-form-item label="人员类型:">
						<view class="item-text">{{ getValue(formData.residentType, dictList.BottomData_resident_type) }}</view>
					</u-form-item>
				</view>
				<view class="check-list">
					<u-form-item label="人员标签:">
						<view class="item-text flex justify-end">
							<view class="tag" v-for="(item, index) in formData.peopleTag" :key="index">
								{{ getValue(item, dictList.people_label) }}
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="check-list">
					<u-form-item label="是否疑是传销场所:" @click="openPicker('isDoubtfulMLMSite', 'isList')" label-width="300rpx">
						<view class="item-text">{{ getValue(formData.isDoubtfulMLMSite, dictList.isList) }}</view>
					</u-form-item>
				</view>
				<view class="check-list">
					<u-form-item label="是否曾是参与传销场所:" @click="openPicker('onceDoubtfulMLMSite', 'isList')" label-width="300rpx">
						<view class="item-text">{{ getValue(formData.onceDoubtfulMLMSite, dictList.isList) }}</view>
					</u-form-item>
				</view>
				<view class="check-list" style="border: none">
					<u-form-item label="备注:" label-width="100rpx">
						<u--textarea v-model="formData.description" maxlength="300"></u--textarea>
					</u-form-item>
				</view>
			</u--form>
			<view class="title-link">在住人员信息</view>
			<uni-table stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="center" width="80"></uni-th>
					<uni-th align="center" width="180"></uni-th>
					<uni-th align="center" width="120"></uni-th>
					<uni-th align="center" width="80"></uni-th>
					<uni-th align="center" width="30"></uni-th>
					<uni-th align="center" width="30"></uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr v-for="(item, index) in userList" :key="index">
					<uni-td align="center">{{ item.name }}</uni-td>
					<uni-td align="center">{{ item.cardNum }}</uni-td>
					<uni-td align="center">{{ item.mobile || ''}}</uni-td>
					<uni-td align="center">{{ getValue(item.residentType, dictList.BottomData_resident_type) }}</uni-td>
					<uni-td align="center">{{ item.age }}</uni-td>
					<uni-td align="center">{{ getValue(item.sex, dictList.system_user_sex) }}</uni-td>
				</uni-tr>
			</uni-table>

			<view class="btn-list flex justify-between">
				<u-button customStyle="color: #3979F9" color="#E2EBFF" shape="circle" text="取消" @click="$emit('input', false)"></u-button>
				<u-button color="#3979F9" shape="circle" text="确定" @click="submit"></u-button>
			</view>
		</view>
		<u-picker :show="showPicker" :columns="columns" keyName="label" @cancel="showPicker = false" @confirm="confirmPicker"></u-picker>
	</u-popup>
</template>

<script>
import * as HouseApi from '@/api/house.js'
import * as DictApi from '@/api/system/dict.js'
export default {
	name: 'checkForm',
	props: {
		value: false,
		houseId: ''
	},
	model: {
		prop: 'showCheck',
		event: 'change'
	},
	data() {
		return {
			showPicker: false,
			columns: [],
			pickerType: '',
			title: '标题',
			formData: {
				houseStatus: '',
				housePurpose: ''
			},
			rules: {
				houseStatus: [{ required: true, message: '请选择房屋分类' }],
				housePurpose: [{ required: true, message: '请选择房屋用途' }],
				homeOwnerRelation: [{ required: true, message: '请填写家庭主关系' }],
				houseOwnerRelation: [{ required: true, message: '请填写房主关系' }]
			},
			labelStyle: {
				fontSize: '28rpx',
				color: '#666666',
				padding: 0
			},
			dictList: {
				house_status: [],
				house_use: [],
				BottomData_resident_type: [],
				isList: [],
				system_user_sex: [],
				people_label: []
			},
			userList: []
		}
	},
	watch: {
		houseId(newVal) {
			this.getDetail(newVal)
			this.getUserList(newVal)
		}
	},
	methods: {
		getValue(value, list) {
			if (!list || list.length == 0) return ''
			const index = list.findIndex((ele) => ele.value == value)
			return index > -1 ? list[index].label : ''
		},
		getDetail(id) {
			HouseApi.getDetail({ houseId: id }).then((res) => {
				this.formData = { ...res.data, isDoubtfulMLMSite: res.isDoubtfulMLMSite || 0, onceDoubtfulMLMSite: res.onceDoubtfulMLMSite || 0 }
			})
		},
		getUserList(id) {
			HouseApi.getHouseUse({ roomId: id }).then((res) => {
				this.userList = { ...res.data }
			})
		},
		getTypeList() {
			DictApi.getTypeList({ dictTypeList: ['house_status', 'house_use', 'BottomData_resident_type', 'system_user_sex', 'people_label'] }).then(
				(res) => {
					this.dictList = {
						...res.data,
						isList: [
							{ value: false, label: '否' },
							{ value: true, label: '是' }
						]
					}
				}
			)
		},
		openPicker(e, list) {
			this.showPicker = true
			this.pickerType = e
			this.columns = [this.dictList[list || e]]
		},
		confirmPicker(e) {
			this.showPicker = false
			const item = e.value[0]
			switch (this.pickerType) {
				case 'house_use':
					this.formData.housePurpose = item.value
					break
				case 'house_status':
					this.formData.houseStatus = item.value
					break
				case 'isDoubtfulMLMSite':
					this.formData.isDoubtfulMLMSite = item.value
					break
				case 'onceDoubtfulMLMSite':
					this.formData.onceDoubtfulMLMSite = item.value
					break
			}
		},
		submit() {
			this.$refs.uForm
				.validate()
				.then((res) => {
					HouseApi.create(this.formData).then(() => {
						uni.$u.toast('成功提交')
						this.$emit('input', false)
						this.$emit('success')
					})
				})
				.catch((errors) => {
					uni.$u.toast(errors[0].message)
				})
		}
	},
	created() {
		this.getTypeList()
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
	}
}
</script>

<style lang="scss">
.u-popup {
	font-size: 28rpx;
	width: 700rpx;
	margin: auto;
	padding: 40rpx;
	overflow: hidden;
	overflow-y: scroll;
	max-height: 90vh;
	.title-link {
		padding: 20rpx 25rpx;
		position: relative;
		font-size: 32rpx;
	}
	.title-link::before {
		content: ' ';
		display: block;
		position: absolute;
		top: 35rpx;
		left: 0;
		height: calc(100% + 10px);
		width: 12rpx;
		height: 12rpx;
		background-color: #5d8fff;
		border-radius: 50%;
	}
	.check-list {
		// padding: 10rpx 20rpx;
		border-bottom: 2rpx solid #d8d8d8;
		min-height: 80rpx;
		.item-text {
			flex: 1;
			width: 100%;
			// width: 200rpx;
			text-align: right;
			color: #2d2c3c;
		}
	}
	.btn-list {
		padding: 20rpx 0;
		button {
			width: 40%;
		}
	}
	.tag {
		padding: 10rpx 20rpx;
		margin-left: 10rpx;
		color: #fff;
		background: #ffdfe2;
		border-radius: 30rpx;
		color: #ff3d3d;
	}
}
</style>
